<template>
  <div class="dashboard-container">

    <div class="page-container">

      <div class="chart-container" style="width: 50%; float: left; overflow: hidden">
        <div id="timeSelector" style="position: absolute; top: 10px; right: 10px;">
          <!-- 选择器 -->
          <el-select v-model="time" placeholder="时间" @change="handleChangeType">
            <el-option label="本日" :value="1" />
            <el-option label="本周" :value="2" />
            <el-option label="本年" :value="3" />
          </el-select>
        </div>
        <div id="myChart2" style="width:100%;height:400px;" />
      </div>
      <div class="chart-container" style="width: 50%; float: left; overflow: hidden">
        <div id="myChart1" style="width:100%;height:400px;" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import * as echarts from 'echarts'
import api from '@/api/system/AnalyseData'

export default {
  name: 'list',

  data() {
    return {
      time: 1,
      list1: [],
      list2: [],
      myChart1: null,
      myChart2: null,


      opinion1: ['未接单', '进行中', '已完成'],
      opintion2: ['空闲', '运行', '故障', '停机'],
      opinionData1: [
        { name: '未接单', value: 0 },
        { name: '进行中', value: 0 },
        { name: '已完成', value: 0 }
      ],
      opinionData2: [
        { name: '空闲', value: 0 },
        { name: '运行', value: 0 },
        { name: '故障', value: 0 },
        { name: '停机', value: 0 }
      ]
    }
  },
  created() {
    this.getOrderDetails()

    this.getDeviceStatus()


  },
  mounted: function() {

  },
  methods: {
    async layout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)

    },

    changeTime(time) {

      this.getOrderDetails();
    },
    getOrderDetails() {

      api.getOrderStatus(this.time)
        .then((response) => {
          // 在异步请求的回调中，更新data中的值
          this.list1 = response.data
          console.log(this.list)
          if (this.list1 != null) {
            this.opinionData1 = []
            if (this.list1[0] >= 0) {
              this.opinionData1.push({ name: '未接单', value: Number(this.list1[0]) })
            }
            if (this.list1[1] >= 0) {
              this.opinionData1.push({ name: '进行中', value: Number(this.list1[1]) })
            }
            if (this.list1[2] >= 0) {
              this.opinionData1.push({ name: '已完成', value: Number(this.list1[2]) })
            }
          }
          this.$nextTick(() => {
            this.drawLine1()
          })
        })
    },
    getDeviceStatus() {
      api.getDeviceStatus()
        .then((response) => {
          // 在异步请求的回调中，更新data中的值
          this.list2 = response.data

          if (this.list2 != null) {
            this.opinionData2 = []
            if (this.list2[1] >= 0) {
              this.opinionData2.push({ name: '空闲', value: Number(this.list2[1]) })
            }
            if (this.list2[2] >= 0) {
              this.opinionData2.push({ name: '运行', value: Number(this.list2[2]) })
            }
            if (this.list2[3] >= 0) {
              this.opinionData2.push({ name: '故障', value: Number(this.list2[3]) })
            }
            if (this.list2[4] >= 0) {
              this.opinionData2.push({ name: '停机', value: Number(this.list2[4]) })
            }
          }
          this.$nextTick(() => {
            this.drawLine2()
          })
        })
    },

    drawLine1() {
      console.log('drawLine 方法被调用')
      if (this.myChart1) {
        this.myChart1.dispose()
      }

      this.myChart1 = echarts.init(document.getElementById('myChart1'))
      // 绘制图表
      this.myChart1.setOption({
        title: {
          text: '订单情况', // 主标题
          subtext: '', // 副标题
          x: 'left' // x轴方向对齐方式
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          bottom: 'bottom',
          data: this.opinion1
        },
        series: [
          {
            name: '订单数据',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data: this.opinionData1,
            minShowLabelAngle: 0,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              color: function(params) {
                // 自定义颜色
                var colorList = ['red', 'yellow', 'green']
                return colorList[params.dataIndex]
              }
            }
          }
        ]
      })
    },
    drawLine2() {

      if (this.myChart2) {
        this.myChart2.dispose()
      }

      this.myChart2 = echarts.init(document.getElementById('myChart2'))
      // 绘制图表
      this.myChart2.setOption({
        title: {
          text: '设备情况', // 主标题
          subtext: '', // 副标题
          x: 'left' // x轴方向对齐方式
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          bottom: 'bottom',
          data: this.opinionData2
        },
        series: [
          {
            name: '设备数据',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data: this.opinionData2,
            minShowLabelAngle: 0,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              color: function(params) {
                // 自定义颜色
                var colorList = ['red', 'yellow', 'green', 'blue']
                return colorList[params.dataIndex]
              }
            }
          }
        ]
      })

    },
  }

}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }




}

</style>
